
<!-- 传统的选项式 API（Vue 2 样式） -->
<!-- <template>
  <div>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script> -->



<!-- 等价的组合式 API（Vue 3 样式）： -->



<template>
  <div>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>
